<template>
	<view class="category">
		<!-- #ifdef MP-WEIXIN -->
		<view v-show="api_host=='https://www.x-mii.com/app/index.php'">
			<ad unit-id="adunit-7b31e21965f6bf2b"></ad>
		</view>
		<!-- #endif -->
		<view class="category-top">
			<view class="brand-category">
				<view v-on:click="switchType('category')" class="item " 
				v-bind:class="{'active':switched_type=='category'}" >
				分类</view>
				<view v-on:click="switchType('brand')" 
				v-bind:class="{'active':switched_type=='brand'}"
				class="item">品牌</view>
			</view>
			<view class="search">
				<view class="text">
					<icon class="icon-small" type="search" size="14"></icon>
					<input v-on:keyup="search_by_key()" type="text" v-model="search.key" />
				</view>
	
				<!-- <view v-on:click="search_clear()" class="check-btn">取消</view> -->
				<view v-on:click="search_by_key()" class="check-btn">确定</view>
			</view>
	
		</view>
	
		<view class="product-field">
			<scroll-view v-show="switched_type=='category'" 
			scroll-y="true" 
			class="left-nav category-list">
	
				<view v-for="item,index in tree" 
				v-on:click="search_by_category( item )" 
				v-bind:class="{'active':search.category==item.id}"
				class="item ">
					{{item.name}}
				</view>
	
			</scroll-view>
			<scroll-view v-show="switched_type=='brand'" 
			scroll-y="true" class="left-nav brand-list">
				<view v-for="item,index in brand_list" 
				v-on:click="search_by_brand( item )" 
				v-bind:class="{'active':search.brand_id==item.id}"
				class="item">
					{{item.name}}
				</view>
	
			</scroll-view>
			<scroll-view scroll-y="true" class="product-list">
	
				<view v-for="(item, key) in goods" class="item ">
	
					<navigator v-bind:url="'/sm_shop/pages/product/product?product_id=' + item.id">
						<image class="img" v-bind:src="item.image"></image>
					</navigator>
	
					<view class="info">
						<navigator v-bind:url="'/sm_shop/pages/product/product?product_id=' + item.id " class="name">
							{{item.name}}
						</navigator>
	
						<view class="price-cart">
							<view class="price">
								<view class="sale-number">销量：{{item.sale}}</view>
								<view v-if="item.special>0" class="old-price">￥{{item.price}}</view>
								<view class="current-price">
									<block v-if="item.special>0">￥{{item.special}}</block>
									<block v-if="!item.special || item.special==0">￥{{item.price}}</block>
								</view>
	
	
	
							</view>
							<view class="buy">
								<navigator v-bind:url="'/sm_shop/pages/product/product?product_id=' + item.id ">
									购买
								</navigator>
							</view>
						</view>
					</view>
	
				</view>
	
			</scroll-view>
		</view>
	
	<trademark></trademark>
	</view>
</template>

<script>
	import trademark from '../../common/trademark';
	const appInstance = getApp();
	export default {
		data() {
			return {
				api_host:appInstance.globalData.api_host,
				title: 'category',
				tree: {},
				brand_list: [],
				search: {

					key: '',
					category: '',
					brand_id: '',
				},
				goods: [],
				switched_type: 'category'
			}
		},
		onLoad( options ) {
			var t = this;
			
			// tab页面的参数不生效， 导致options 无法使用
			// if (options.key) {
			// 	this.search.key = options.key;
			// }
			// if (options.category_id) {
			// 	this.search.category = options.category_id;
			// }
			// if (options.brand_id) {
			// 	this.search.brand_id = options.brand_id;
			// }

			if( !this.$store.state.vuex_category_tab_id 
				&& !this.$store.state.vuex_brand_tab_id ){
				t.product_list();
			}

			// appInstance.util.footer(this);
			this.category_list();
			this.get_brand_list();
		},
		
		onShow:function(){
			
			// this.search.category = this.$store.state.vuex_category_tab_id
			if( this.$store.state.vuex_category_tab_id ){
				this.search_by_category({
					id:this.$store.state.vuex_category_tab_id
				})
				this.switchType('category');
				this.$u.vuex('vuex_category_tab_id', '') // vuex state 状态恢复
			}else if( this.$store.state.vuex_brand_tab_id ){
				this.search_by_brand({
					id:this.$store.state.vuex_brand_tab_id
				})
				this.switchType('brand');
				this.$u.vuex('vuex_brand_tab_id', '') // vuex state 状态恢复
			}
			

		},
		
		methods: {

			category_list: function(resolve) {

				var url = '&r=category.tree';

				var t = this;

				appInstance.globalData.request(url, {}, 'GET', function(res) {

					if (res.data) {
						t.tree = res.data;

						if (typeof resolve == 'function') {
							resolve(res.data);
						}

					}

				});

			},

			get_brand_list: function(resolve) {

				var url = 'r=brand.index';

				var t = this;

				appInstance.globalData.request(url, {}, 'GET', function(res) {

					if (res.data) {

						t.brand_list = res.data;

						if (typeof resolve == 'function') {
							resolve(res.data);
						}

					}

				});

			},

			product_list: function(resolve) {

				var url = '&r=goods.index';

				var t = this;

				var data = {

					key: this.search.key,
					category: this.search.category,
					brand_id: this.search.brand_id,

				};

				appInstance.globalData.request(url, data, 'GET', function(res) {

					if (res.data) {

						t.goods = res.data;
						if (typeof resolve == 'function') {
							resolve(res.data);
						}
					}

				});

			},

			gotoBuy: function( product ) {

				uni.navigateTo({
					url: '/sm_shop/pages/checkout/checkout?product_id=' + product.id
				});

			},

			//
			switchType: function( type ) {

				this.switched_type = type;			

			},

			search_by_key: function( ) {
				
				console.log( 'search_by_key' );
				this.product_list();

			},

			search_by_category: function( category ) {

				if (this.search.category == category.id) {
					this.search.category = '';
				} else {
					this.search.category = category.id
				}
				this.search.brand_id = '';
				this.product_list();

			},

			search_by_brand: function( brand ) {

				if (this.search.brand_id == brand.id) {
					this.search.brand_id = '';
				} else {
					this.search.brand_id = brand.id;
				}
				this.search.category = '';
				this.product_list();
			},

			search_clear: function() {

				this.search = {
					key: '',
					category: '',
					brand_id: ''
				}
				this.product_list();

			}
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			var p1 = new Promise(this.category_list);
			var p2 = new Promise(this.product_list);
			var p3 = new Promise(this.get_brand_list);
			var p = Promise.all([p1, p2, p3]);
			p.then(function(result) {

				console.log('promise');
				console.log(result);
				uni.stopPullDownRefresh();

			});
		},
		components:{
			trademark
		},
	}
</script>

<style lang="less">
page{
  height:100%;
  overflow:hidden;
}
.category{

  height:100%;

  .category-top{
    position:fixed;
    width:100%;
    background-color: #fff;

    .brand-category{

      display: flex;
      justify-content: space-between;
      align-items: center;
      width:600rpx;
      margin:20rpx auto;

      border-radius:20rpx;
      border:solid 1px #ff3c29;
      overflow:hidden;

      .item{

        width:50%;
        height:60rpx;
        line-height:60rpx;
        text-align:center;

        &.active{
          background-color: #ff3c29;
          color:#fff;
        }

      }

    }
    .search{
      width:100%;
      height:80rpx;
      padding:10rpx;
      line-height:60rpx;
      background:#f2f2f2;
      font-size:30rpx;
      .text{
        margin-left:10rpx;
        padding-left:50rpx;
        width:620rpx;
        height:60rpx;
        float:left;
        background-color: #fff;
        position:relative;
        border-radius: 10rpx;
        icon{
          position:absolute;
          left:10rpx;
          top:12rpx;
        }
        input{


          width:100%;
          height:100%;
        }
      }

      .check-btn{
        text-align:center;
        width:100rpx;
        float:right;
      }
    }

    .category-list-scroll{
      height:50rpx;

      .category-list{

        display:flex;
        justify-content: space-around;
        .item{

          width:150rpx;
          text-align:center;
          flex:none;

          line-height:50rpx;
          &.active{
            color:#ff4e4d;
            border-bottom: solid 1px #ff4e4d;
          }
        }
      }


    }
  }


  .product-field{

    background-color:#F5F5F5;
    padding-top:200rpx;
    padding-bottom:120rpx;

    height:100%;
    display:flex;
    justify-content: space-between;
    .left-nav{

      width:180rpx;
      height:100%;
      font-size:24rpx;

      &.brand-list,&.category-list{

        .item{

          width:100%;
          text-align:center;
          flex:none;
          padding:20rpx 0;

          line-height:50rpx;
          &.active{
            color:#ff4e4d;
            font-size:26rpx;
            background-color:#fff;
            font-weight:bold;
          }
        }

      }
    }

    .product-list{

      background-color:#fff;
      width:570rpx;
      //padding:20px;
      //padding: 0px 0 120rpx;
      padding: 0px 0 0 20rpx;
      height:auto;

      .item{

        //height:260rpx;
        height:200rpx;
        margin:15rpx 0 30rpx 0;


        .img{

          //width:260rpx;
          //height:260rpx;
          width:200rpx;
          height:200rpx;
          float:left;
          border-radius: 20rpx;

        }
        .info{
          position:relative;
          height:100%;
          font-size:26rpx;
          padding:0 10rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .name{

            font-size:24rpx;
            overflow: hidden;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            display: -webkit-box;

          }

          .price-cart{

            display:flex;
            justify-content: space-between;
            align-items: flex-end;
            color:#FF4F4F;
            line-height:1.5;

            .price{

              flex:none;
              .sale-number{
                color:#777;
                margin-left:6rpx;
                font-size: 28rpx;
              }

              .old-price{

                font-weight:normal;
                color:#777;
                font-size:26rpx;
                text-decoration: line-through;
              }

              .current-price{

              }

            }

            .saled{
              display:none;
              flex:none;
            }

            .buy{
              flex:none;
              border-radius: 5rpx;
              border:solid 1px #FF4F4F;
              padding:0 15rpx;
            }
          }

        }
      }
    }
  }


}
</style>
